import React from 'react'
import { Toast } from 'antd-mobile';
import './Superway2.css';
import Topbar from '../../components/Topbar/Topbar';
import SuperwaySay2 from '../../components/StudySay/StudySay';

class Superway2 extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {
        content:'',
        selectcomment:'none',

        //获取本地中使用用户的id
        id:localStorage.getItem('userid'),
	  };
    }

    async componentDidMount() {
        //获取所有动态
        fetch(`https://www.prebeauty.work/superway2`,{
        method:'GET',
        headers:{
            'content-type': 'application/json'
        }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        dataList:data
                    })
                    console.log(this.state.dataList)
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    /*显示发布的窗口 */
    showSayComment(){
        if(this.state.selectcomment === 'none'){
            this.setState({
                selectcomment:'block'
            })
        }else if(this.state.selectcomment === 'block'){
            this.setState({
                selectcomment:'none'
            })
        }
    } 

	render() {
        return (
            <div className="superway2">
                <Topbar name="找资料" color="#009999"/>

                 {/* 发布 */}
                <div
                    className="iconfont icon-jia-tianchong"
                    style={{ fontSize: 30, position: 'fixed', bottom: 50, color: '#009999', right: 10}}
                    onClick={localStorage.getItem('token') ? this.showSayComment.bind(this) : () => console.log('请先进行登录！')}
                ></div>

                {
                    (!this.state.dataList) ? null : this.state.dataList.map((item,index)=>{
                        return (
                            <div key={index} >
                                <SuperwaySay2 userid={item.userid} time={item.time} content={item.content} />
                            </div>
                        ) 
                    })
                }

                {/*点击评论显示的发布评论窗口*/}
                <div className="saydetail-commenttext" style={{display: this.state.selectcomment}}>
                    <div className="saydetail-commenttext-tab"> 
                        <p style={{color:'#236E3D',position:'absolute',top:'25px',left:'5%'}} 
                            onClick={()=>{
                                this.setState({
                                    selectcomment:'none'
                                })
                                Toast.fail('取消发布',1);
                        }}>取消</p>
                        <p style={{color:'#236E3D',position:'absolute',top:'25px',right:'5%'}} 
                             onClick={async()=>{
                                const super2param = {
                                    userid:this.state.id,
                                    content:this.state.content,
                                }
                                await fetch('https://www.prebeauty.work/superway2', {
                                    method: 'POST',
                                    body: JSON.stringify(super2param),
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                })
                                .then((res) => res.json() )
                                .then((res) => {
                                    console.log(res);
                                    Toast.success('成功发布',1);
                                    this.setState({
                                        selectcomment:'none'
                                    })
                                    //重新获取所有动态
                                    fetch(`https://www.prebeauty.work/superway2`,{
                                        method:'GET',
                                        headers:{
                                            'content-type': 'application/json'
                                        }
                                        }).then((res)=>{
                                            if(res.status===200){
                                                res.json().then( (data)=> {
                                                    this.setState({
                                                        dataList:data
                                                    })
                                                    console.log(this.state.dataList)
                                                })
                                            }else {
                                                alert("出现一个问题");
                                            }
                                        })
                                })
                            }}
                        >发布</p>
                    </div>
                    <textarea 
                        placeholder='找到称心的学习资料，让学习事半功倍...' 
                        style={{width:'80%',height:'90px',borderRadius:'20px',marginTop:'15px',marginLeft:'5%',padding:'6px 3%'}}
                        onChange={(e)=>{
                            this.setState({
                                content:e.target.value 
                            })
                        }}
                    ></textarea>
                </div>
            </div>
        )
    }
}

export default Superway2